<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jq轮播图</title>
		<link rel="stylesheet" type="text/css" href="../carousel.css"/>
	</head>
	<body>
		<!-- 轮播图 -->
        <div class="carousel">
            <ul class="inner">
                <li class="item"><img src="../../img/0.jpg" alt=""></li>
                <li class="item"><img src="../../img/1.jpg" alt=""></li>
                <li class="item"><img src="../../img/2.webp" alt=""></li>
            </ul>
            <div class="btn leftBtn">&lt;</div>
            <div class="btn rightBtn">&gt;</div>
        </div>
        
		<script src="../jquery-2.1.0.js"></script>		
		<script src="../Carousel.js" type="text/javascript" charset="utf-8"></script>
		<script>

//			
			var c1= new Carousel({
				element:'.carousel',
				auto:true,
			})
			
			//左边边按钮的点击事件
//			$('.leftBtn').on("click",function(){
//				if(flag == false){
//					return;
//				}
//				flag=false;
//				//下标--
//				index--;
//				//ul执行移动的动画
//				$('.carousel').find('.inner').animate(
//					{'marginLeft':-1*index*li_width},1000,
//					function(){
//						flag = true;
//						//执行动画后的回调
//						console.log(index);
//						if(index<=0){
//							//回到3号位
//							index=3;
//							$(this).css({'marginLeft':-1*index*li_width});
//						}
//					}
//				)
//			})
			
			
			
		</script>
	</body>
</html>
